<template>
<div>
  <el-col :span="2" v-for="(o, index) in list" :key="o" :offset="index > 1 ? 1 : 1">
    <el-card :body-style="{ padding: '0px' }">
      <el-image :src="o.head" style="height: 100px"></el-image>
      <el-collapse>
        <span>{{o.name}}</span>
        <br>
        <el-popover placement="top-start" :title="o.name" width="220"
                    trigger="hover">
          <el-button slot="reference" style="width: 100%">详情</el-button>
          活动价格： {{o.price}}元<br><br>
          开始时间：{{o.start}}<br><br>
          结束时间：{{o.end}}<br><br>
          剩余数量:{{o.nums}}<br><br>
          活动状态：<span v-if="o.status==1">正在进行</span> <span v-if="o.status==0">还没有开始</span><br><br>
        </el-popover>
        <br>
        <el-link icon="el-icon-shopping-cart-2" type="primary" @click="gwc(o)" style="font-size: 16px">点击购买</el-link>
      </el-collapse>
    </el-card>
    <br><br>
  </el-col>
  <el-dialog :v-bind=book   :visible.sync="zhucs0how" width="35%" :before-close="handleClose"  @close="colse()">
    <div v-show="xia">
      <el-image :src="book.head" style="height: 250px;width: 200px"></el-image><br>
      <span style="font-size: 19px;font-weight: bold">  {{book.name}}    {{book.aname}} </span>

      <br><span style="font-size: 18px">{{book.price}} 元  </span>
      <br><br><br><br>
      <template>
        <el-input-number v-model="num" @change="aa(num)" :min="1" :max="10" placeholder="描述文字"></el-input-number>
      </template>
      &nbsp;&nbsp;<template>
      <el-popconfirm title="确定付款吗？" @confirm="addorder(book.nums)" @cancel="addorder2()">
        <el-button slot="reference" icon="el-icon-mouse"  type="primary" >点击购买</el-button>
      </el-popconfirm>
    </template>
    </div>
    <el-steps v-show="steps" :active="active" finish-status="success">
      <el-step :title=a1></el-step>
      <el-step title="选择收货信息"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <div v-show="A1">
      <el-image :src="book.head" style="height: 250px;width: 200px"></el-image><br>
      {{book.name}}     x{{num}}<br>
      <br><br>
      一共要支付 {{book.price}} 元
    </div>
    &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
    <div v-show="A2">
      <template>
        <el-select v-model="fsite.id" placeholder="请选择" style="width: 300px" @change="change(fsite.id)">
          <el-option v-for="item in fsite" :key="item.id" :label="item.aa" :value="item.id">
            <!--                    {{item.province}}   {{item.city}}   {{item.district}}   {{item.address}}-->
          </el-option>
        </el-select>
      </template>
      <el-button @click="addorders()" icon="el-icon-thumb" type="primary" v-show="ad">确定购买</el-button>
    </div>
    <div v-show="A3">
      <h1>您的快递信息将会通过账号绑定的手机号通知</h1>
    </div>
    <el-button type="primary" :icon="s" v-show="stepss" style="margin-top: 12px;" @click="next()" v-text="setbu"></el-button>
  </el-dialog>
</div>
</template>

<script>
import moment from "moment";

export default {
  name: "Activty",
  created() {
   this.find(),
     this.findsite();
  },
  data(){
    return{
    list:{},
      zhucs0how:false,
      yy:0,
      book:{},
      xia:true,
      num:1,
      s:'el-icon-right',
      a1:'购买信息',
      A1:false,
      A2:false,
      A3:false,
      ad:false,
      setbu:'下一步',
      steps:false,
      stepss:false,
      active:0,
      fsite:{},
      siteid:0,
      forderp:{},
      fcart:{},
      fuser:[],
      dialogVisible: false,
    }
  },
  methods:{
    find() {
      this.$http.post("/frontservice/activty/find").then(data => {

        if (data.data!=null){
          this.list = data.data;
        }else {
          alert("暂时没有·秒杀活动")
        }

      })
    },
    gwc(o){
      let loginUser=sessionStorage.getItem('token')
      loginUser=this.$qs.parse(loginUser)
      if (loginUser.uid!=null ){
        if (o.status==1){
        this.zhucs0how=true
        this.yy=o.price
        this.book=o
        }else {
          alert("活动还没有开始呢")
        }
      }else {
        alert("登录可以购买")
      }
    },aa(val){
      if (val!=0){
        this.book.price=this.yy*val
      }
    },addorder(num){
      if (this.num>num){
        alert("没有这么多库存了")
      }else {
        this.xia = false;
        this.steps = true;
        this.A1 = true;
        this.stepss = true
      }

    },next(){
      this.active++
      if (this.active>0) {
        this.A1 = false
        this.A2 = true
        this.stepss = false
      }
      if (this.active>1){
        this.A2=false
        this.A3=true
        this.stepss=true
        this.setbu='点击退出'
      }
      if (this.active>2){
        this.$router.go(0)
      }
    },findsite(){//查该用户的收货地址
      let f_user=this.$store.state.user
      console.log("ddd")
      this.$http.post('/frontservice/site/find', {f_user}).then(data => {
        this.fsite = data.data
      })
    },change(id) {//选择地址下拉框改变
      if (id != null) {
        this.ad = true;
        this.siteid = id
      }
    },addorders(){
      this.next()
      this.forderp.id=0
      this.forderp.book=this.book.bid
      this.forderp.num=this.num
      this.forderp.price=this.yy
      this.forderp.zongjia=this.book.price
      this.forderp.f_user=this.$store.state.user
      this.forderp.f_site=this.siteid
      this.forderp.state=0
      console.log(this.forderp)
      let  date= new Date()
      let dates=moment(date).format('YYYY-MM-DD HH:mm:ss')
      this.forderp.gtime=dates
      console.log(this.forderp)
      this.$http.post("/frontservice/forderss/add",this.forderp).then(data=> {
        this.update()
      });
    },handleClose(done) {
      this.$confirm('确认取消？')
        .then(_ => {
          done();
          this.$router.go(0)
          this.find()
          this.num=1
          this.book.price=this.list.price
        })
        .catch(_ => {
        });
    },update(){
       let aid=this.book.aid
       let num=this.book.nums-this.num
      this.$http.post("/frontservice/activty/update",{num,aid}).then(data=> {

      });
    }
  }
}
</script>

<style scoped>

</style>
